import { Grid, CssBaseline, Paper } from "@mui/material";
import React from "react";
import { ColumnFlexBoxSC } from "../../components/common/Common.jsx";
/**
 * 登录注册容器组件，用于提供登录和注册表单的响应式布局容器
 * @param {React.ReactNode} props.children - 要在容器内显示的内容，通常是登录或注册的表单元素
 * @returns {JSX.Element} 一个响应式的网格容器元素
 */
export default function LoginRegisterContainer({ children }) {
  return (
    <Grid container component="main" sx={{ height: "100vh" }}>
      <CssBaseline />
      <Grid
        item
        xs={false}
        sm={4}
        md={7}
        sx={{
          backgroundImage: `url('https://source.unsplash.com/random?wallpapers'), 
          url('assets/images/loginImage.jpg')`,
          backgroundRepeat: "no-repeat",
          // eslint-disable-next-line no-confusing-arrow
          backgroundColor: (theme) =>
            // eslint-disable-next-line implicit-arrow-linebreak
            theme.palette.mode === "light"
              ? theme.palette.grey[50]
              : theme.palette.grey[900],
          backgroundSize: "cover",
          backgroundPosition: "center",
        }}
      />
      <Grid item xs={12} sm={8} md={5} component={Paper} elevation={6} square>
        <ColumnFlexBoxSC sx={{ my: 8, mx: 4 }}>{children}</ColumnFlexBoxSC>
      </Grid>
    </Grid>
  );
}
